<template>
  <div ref="select" class="xtx-select" tabindex="-1" @focus="open()">
    <div class="curr" v-if="value">{{value}}</div>
    <div class="curr ph" v-else>请选配送地区</div>
    <span class="iconfont icon-angle-left"></span>
    <div id="city" class="list city">
      <div class="body" v-if="!province">
        <span
          @click="changeProvince(item)"
          v-for="item in provinces"
          :key="item.code"
          href="javascript:;"
        >{{item.name}}</span>
      </div>
      <div class="body" v-else>
        <span
          @click="changeCity(item)"
          v-for="item in cities"
          :key="item.code"
          href="javascript:;"
        >{{item.name}}</span>
      </div>
      <div class="foot">
        <span class="submit" @click="submit()">确认</span>
        <span class="clear" @click="clear()">取消</span>
        <i>已选：{{selected}}</i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'goods-area',
  props: {
    value: {
      type: String
    }
  },
  data () {
    return {
      province: '',
      city: '',
      provinces: [],
      cities: []
    }
  },
  computed: {
    selected () {
      return this.province + ' ' + this.city
    }
  },
  created () {
    this.getProvince()
  },
  methods: {
    getProvince () {
      this.$http.get('https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json').then((res) => {
        this.provinces = res.data
      })
    },
    changeProvince (item) {
      this.province = item.name
      this.cities = this.provinces.find(p => p.name === item.name).areaList
    },
    changeCity (item) {
      this.city = item.name
    },
    clear () {
      this.province = ''
      this.city = ''
    },
    submit () {
      if (this.province && this.city) {
        this.$emit('input', this.province + ' ' + this.city)
        this.$emit('change', this.province + ' ' + this.city)
        this.clear()
      }
      this.$refs.select.blur()
    },
    open () {
      this.clear()
    }
  }
}
</script>

<style scoped lang='less'>
// 自定义下拉框
.xtx-select {
  min-width: 100px;
  background: #fff;
  height: 28px;
  position: relative;
  display: inline-block;
  outline: none;
  vertical-align: middle;
  margin-left: 5px;
  cursor: pointer;
  .curr {
    width: 100%;
    height: 28px;
    padding-left: 10px;
    padding-right: 25px;
    border: 1px solid #e4e4e4;
    overflow: hidden;
    line-height: 26px;
    &.ph {
      color: #cccccc;
    }
  }
  &:focus {
    .iconfont {
      transform: rotate(-270deg);
    }
    .list {
      display: block;
    }
  }
  .iconfont {
    position: absolute;
    top: 5px;
    right: 7px;
    font-size: 14px;
    color: #cccccc;
    transition: all 0.5s;
    transform: rotate(-90deg);
    &::before {
      font-size: 12px;
    }
  }
  .list {
    position: absolute;
    left: 0;
    top: 27px;
    border: 1px solid #e4e4e4;
    width: 500px;
    max-height: 200px;
    overflow-y: auto;
    background: #ffffff;
    display: none;
    z-index: 9999;
    // 选择城市
    &.city {
      max-height: none;
      .foot {
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-top: 1px dashed #e4e4e4;
        padding: 0 10px;
        > i {
          color: #999999;
        }
        > span {
          float: right;
          margin-left: 10px;
          cursor: pointer;
          &.clear {
            color: #cccccc;
          }
          &.submit {
            color: @xtxColor;
          }
        }
      }
      .body {
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        > span {
          color: #666666;
          width: 25%;
          text-align: center;
          line-height: 30px;
          height: 30px;
          overflow: hidden;
          cursor: pointer;
          &:hover {
            color: @xtxColor;
          }
        }
      }
    }
  }
}
</style>
